<template>
    <div class="login">
        <div class="logo-img">
            <img src="../../assets/imgs/agent/logo.png" alt="" srcset="">
        </div>
        <div class="list">
            <ul>
                <li class="clearfix">
                    <p class="pops">手机号</p>
                    <p class="mobile fl">+86</p>
                    <input type="text" class="mobile fl" placeholder="请输入电话号码" maxlength="11" v-model="queryParam.mobile" @blur="usernameBlur" onkeyup="this.value=this.value.replace(/[^0-9]+/,'');" @keyup="myKeyup($event)">
                </li>
                <li class="clearfix">
                    <p class="pops">验证码</p>
                    <input type="text" class="mobile fl" placeholder="请输入验证码" maxlength="6" v-model="queryParam.code" @blur="codeBlur" @keyup="myKeyup($event)">
                    <button @click="getSMSCode()" class="code-btn" :disabled="!show">
                        <span v-show="show">获取验证码</span>
                        <span v-show="!show" class="count">{{count}} s</span>
                    </button>
                </li>
            </ul>
        </div>
        <!-- <div class="record">
            <div class="agre" @click="direct('forgetPassword')">
                <input id="risk-checkbox" name="" type="checkbox" value="" class="checkbox" checked="checked">
                <span class="tets">记住账号</span>
            </div>
            <div class="wji clearfix">
                <span @click="direct('forgetPassword')">忘记密码？</span>
            </div>
        </div> -->
        <div class="btn" @click="loginNow">
            <span>代理人登录</span>
        </div>
        <div class="tit" @click="direct('agApply')">
            <span>---------</span>
            <span>点击切换代理人申请</span>
            <span>---------</span>
        </div>

        <!-- 弹出层 -->
        <div class="mask" v-if="isAshow==true">
            <div class="hyfl">
                <div class="words">
                    <p>该用户不存在</p>
                    <p>请尽快申请成为我们的代理人</p>
                </div>
                <div class="confirm">
                    <p @click="isAshow=false">取消</p>
                    <p @click="direct('agInfor')">申请</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import http from "@/assets/js/axios";
import { domain } from '@/assets/js/config'
import $ from 'jquery'
import { Toast } from 'mint-ui';
export default {
    data() {
        return {
            isAshow: false,
            queryParam: {
                mobile: '',
                code: ''
            },
            show: true,
            count: '',
            timer: null,
        }
    },
    components: {

    },
    mounted() {
        // this.loginToken();
    },
    methods: {
        //设置手机号存储开始
        // this.queryParam.mobile = localStorage.getItem('mobile') || '';
        direct: function (val) {
            this.$router.push({ path: '/' + val });
        },
        myKeyup: async function (e) {
            var keycode = window.event ? e.keyCode : e.which;
            if (keycode == 13) {
                // this.loginRightNow();
            }
        },
        loginToken() {
            sessionStorage.pxoveItem('UserInfo');
        },
        usernameBlur: async function () {
            const _this = this
            if (_this.queryParam.mobile) {
                _this.usernameTips = false;
                if (!/^1[3|4|5|7|8][0-9]\d{8}$/.test(_this.queryParam.mobile)) {
                    Toast({ message: '请输入正确的手机号！', duration: 1000 })
                }
            } else {
                _this.usernameTips = true;
            }
        },
        codeBlur: async function () {
            const _this = this
            if (_this.queryParam.code) {
                _this.usernameTips = false;
                if (!/^[0-9]{4,6}$/.test(_this.queryParam.code)) {
                    Toast({ message: '请输入正确的验证码！', duration: 1000 })
                }
            } else {
                _this.usernameTips = true;
            }
        },
        passwordBlur: async function () {
            const _this = this
            if (_this.queryParam.password) {
                _this.passwordTips = false;
                if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(_this.queryParam.password)) {
                    Toast({ message: '密码格式不正确！', duration: 1000 })
                }
            } else {
                _this.passwordTips = true;
            }
        },
        loginNow: async function () {
            if (this.queryParam.mobile && this.queryParam.code) {
                if (!/^1[3|4|5|7|8][0-9]\d{8}$/.test(this.queryParam.mobile)) {
                    Toast({ message: "请输入正确的手机号！", duration: 1000 });
                } else if (!/^[0-9]{4,6}$/.test(this.queryParam.code)) {
                    Toast({ message: "验证码格式不正确！", duration: 1000 });
                } else {
                    const res = await http.post('xshk/f/home/message_agentlogin', this.queryParam)
                    // console.log(res);
                    if (res.data.code == 0) {
                        // console.log(res);
                        Toast({ message: res.data.message, duration: 1000 });
                        localStorage.setItem('token', res.data.data.token)
                        // this.$router.push('/center')

                        if (res.data.data.user_type == '1') {
                            // Toast({ message: '你还不是代理用户，请前去申请', duration: 1000 });
                            this.isAshow = true;
                            sessionStorage.removeItem('mobie')
                            sessionStorage.setItem('mobie', this.queryParam.mobile)
                        } else if (res.data.data.user_type == '2') {
                            // Toast({ message: '代理用户申请中', duration: 1000 });
                            this.$router.push('/agProg')
                        } else if (res.data.data.user_type == '3') {
                            // Toast({ message: '代理用户', duration: 1000 });
                            this.$router.push('/ckCenter')
                        } else if (res.data.data.user_type == '4') {
                            // Toast({ message: '代理用户', duration: 1000 });
                            this.$router.push('/agProg')
                        }


                        // 记录登陆号码开始
                        // if (this.queryParam.mobile == localStorage.getItem('phones')) {
                        //     if ($('#risk').is(":checked")) {
                        //         localStorage.setItem("phones", this.queryParam.mobile);
                        //     } else {
                        //         console.log(555);
                        //         localStorage.removeItem("phones")
                        //     }
                        // } else if (this.queryParam.mobile != localStorage.getItem('phones')) {
                        //     if ($('#risk').is(":checked")) {
                        //         localStorage.setItem("phones", this.queryParam.mobile);
                        //     } else if ($('#risk').is("checked")) { }
                        // }
                        // 记录登陆号码结束



                    } else if (res.data.code == 2) {
                        Toast({ message: res.data.message, duration: 1000 });
                        this.$router.push('/agInfor')
                        sessionStorage.removeItem('mobie')
                        sessionStorage.setItem('mobie', this.queryParam.mobile)
                    } else {
                        Toast({ message: res.data.message, duration: 1000 });
                    }
                }
            } else {
                Toast({ message: "请把必填数据填写完整，再提交！", duration: 1000 });
            }
        },
        getCode(queryParam) {
            const TIME_COUNT = 60;
            if (!this.timer) {
                this.count = TIME_COUNT;
                this.show = false;
                this.timer = setInterval(() => {
                    if (this.count > 0 && this.count <= TIME_COUNT) {
                        this.count--;
                    } else {
                        this.show = true;
                        clearInterval(this.timer);
                        this.timer = null;
                    }
                }, 1000)
            }
        },
        getSMSCode: async function () {
            // console.log(this.queryParam.mobile);
            if (this.queryParam.mobile) {
                if (!/^1[3|4|5|7|8][0-9]\d{8}$/.test(this.queryParam.mobile)) {
                    Toast('请输入正确的手机号码！', { duration: 1000 });
                    return false;
                } else {
                    const res = await http.post('xshk/f/agent/sendCode', this.queryParam)
                    // console.log(res);
                    if (res.data.code == 0) {
                        this.getCode()
                        Toast({ message: res.data.message, duration: 1000 });
                        // this.$router.push({ path: "/my" });
                    } if (res.data.code == 1) {
                        Toast({ message: res.data.message, duration: 1000 });
                        this.isAshow = true;
                        sessionStorage.removeItem('mobie')
                        sessionStorage.setItem('mobie', this.queryParam.mobile)
                    } else {
                        Toast({ message: res.data.message, duration: 1000 });

                    }
                }
            } else {
                Toast({ message: '请输入手机号后，再提交！', duration: 2000 })
            }

        }
    }
}
</script>

<style lang="stylus" scoped>
.login {
    .logo-img {
        margin: 0 auto;
        margin-top: 50px;
        height: 88px;
        width: 123px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .list {
        padding: 0 30px;
        margin-top: 40px;

        ul {
            li {
                border-bottom: 1px solid #ccc;
                position: relative;

                .pops {
                    padding-top: 20px;
                    font-size: 14px;
                    font-family: MicrosoftYaHei;
                    color: rgba(128, 128, 128, 1);
                }

                .mobile {
                    padding: 10px;
                    font-size: 16px;
                    font-family: MicrosoftYaHei;
                    color: rgba(0, 0, 0, 1);
                }

                .code-btn {
                    padding: 0;
                    position: absolute;
                    top: 45px;
                    right: 20px;
                    border: none;
                    border-radius: 5px;
                    font-size: 12px;
                    color: rgba(255, 255, 255, 1);

                    span {
                        width: 80px;
                        height: 30px;
                        line-height: 30px;
                        display: inline-block;
                        border-radius: 5px;
                        background: #c2df5a;
                    }

                    .count {
                        background: #ccc;
                    }
                }

                .mobile {
                    padding: 12px 0;
                    font-size: 16px;
                    color: rgba(0, 0, 0, 1);
                    width: 200px;
                }
            }
        }
    }

    .record {
        margin-top: 20px;
        margin-bottom: 30px;
        padding-bottom: 10px;

        .agre {
            width: 115px;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            float: left;
            position: relative;

            .checkbox {
                position: absolute;
                top: 10px;
                left: 50px;
                width: 20px;
                height: 20px;
            }

            span.tets {
                width: 115px;
                position: absolute;
                top: 8px;
                left: 80px;
                color: #666;
                margin-bottom: 5px;
            }
        }

        .wji {
            float: right;
            height: 20px;
            line-height: 20px;

            span {
                margin: 35px 0;
                color: #e75a3e;
                font-size: 14px;
                margin-right: 40px;
            }
        }
    }

    .btn {
        margin: 0 auto;
        margin-top: 60px;
        width: 300px;
        height: 50px;
        line-height: 50px;
        border-radius: 10px;
        text-align: center;
        font-size: 20px;
        color: #fff;
        background: #c2df5a;
    }

    .tit {
        margin-top: 30px;
        text-align: center;
        color: #A7D600;
        font-size: 16px;
    }

    .mask {
        position: fixed;
        box-sizing: border-box;
        left: 0px;
        top: 0px;
        right: 0px;
        bottom: 0px;
        background-color: rgba(0, 0, 0, 0.85);
        z-index: 99;

        .hyfl {
            margin: 0 auto;
            margin-top: 100px;
            width: 255px;
            height: 180px;
            // position: absolute;
            // left: 55px;
            // top: 100px;
            background-color: #fff;
            position: relative;

            .words {
                font-size: 16px;
                text-align: center;
                padding: 50px 0;
            }

            .confirm {
                position: absolute;
                bottom: 0px;
                text-align: center;
                width: 100%;
                height: 50px;
                line-height: 50px;
                border-top: 1px solid #f0f0f0;

                p {
                    float: left;
                    width: 50%;
                    font-size: 16px;
                    font-family: Adobe Heiti Std R;
                    font-weight: normal;
                    color: rgba(153, 153, 153, 1);
                }

                p:nth-child(2) {
                    border-left: 1px solid #f0f0f0;
                    color: #A6D400;
                }
            }
        }
    }
}
</style>
